<template>
  <div class="home-page">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="活动名称" prop="name">
        <el-col :span="11">
          <el-input v-model="ruleForm.name"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="活动区域" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
          <el-option label="佛山市顺德区北滘镇" value="佛山市顺德区北滘镇"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动时间" required>
        <el-col :span="11">
          <el-form-item prop="date1">
            <el-date-picker v-model="ruleForm.date1" type="date" placeholder="选择日期" style="width: 100%;" format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="活动场馆" prop="type">
        <el-checkbox-group v-model="ruleForm.type">
          <el-checkbox label="美的新都汇" name="type"></el-checkbox>
          <el-checkbox label="南苑商业街" name="type"></el-checkbox>
          <el-checkbox label="乐扣商城" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="报名方式" prop="joinWay">
        <el-radio-group v-model="ruleForm.joinWay">
          <el-radio label="网上报名"></el-radio>
          <el-radio label="现场报名"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">{{ btnText }}</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      btnText: '添加活动',
      action: 'add',
      ruleForm: {
        id: '',
        name: '佛山大型相亲交友见面会',
        region: '佛山市顺德区北滘镇',
        date1: '',
        type: [],
        joinWay: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date1: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],
        address: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        joinWay: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ]
      }
    }
  },
  mounted () {
    if (this.$route.query.id) {
      this.btnText = '修改活动'
      this.ruleForm.id = this.$route.query.id
      this.action = 'modify'
      let params = {
        id: this.$route.query.id
      }
      this.$store.dispatch('getActivityById', params).then((res) => {
        if (res.code === '1') {
          this.ruleForm.name = res.data.name
          this.ruleForm.region = res.data.region
          this.ruleForm.date1 = res.data.date1
          this.ruleForm.type = res.data.type.split(',')
          this.ruleForm.joinWay = res.data.joinWay
        } else {
          this.action = 'add'
          this.ruleForm.id = ''
        }
      }).catch((err) => {
        // this.loading = false
        console.log(err)
      })
    } else {
      this.btnText = '添加活动'
      this.ruleForm.id = ''
      this.action = 'add'
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = this.ruleForm
          if (this.action === 'add') {
            this.$store.dispatch('addActivity', params).then((res) => {
              if (res.code === '1') {
                this.$message({
                  showClose: true,
                  message: '添加成功',
                  type: 'success'
                })
                this.$router.push({ path: 'activityDetial' })
              } else {
                this.$message({
                  showClose: true,
                  message: '添加失败',
                  type: 'fail'
                })
              }
            }).catch((err) => {
              // this.loading = false
              console.log(err)
            })
          } else {
            this.$store.dispatch('updateActivityById', params).then((res) => {
              if (res.code === '1') {
                this.$message({
                  showClose: true,
                  message: '修改成功',
                  type: 'success'
                })
                this.$router.push({ path: 'activityDetial' })
              } else {
                this.$message({
                  showClose: true,
                  message: '修改失败',
                  type: 'fail'
                })
              }
            }).catch((err) => {
              // this.loading = false
              console.log(err)
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
  .home-page {
    margin: 100px auto;
    width: 50vw;
    height: 80vh;
  }
</style>
